<template>
    <div id="content">
        <section class="section1">
            <div class="crumbs">
                <span class="iconfont icon-ziyuan iocn-size"></span>
                <span><strong>资源库</strong></span>
            </div>
            <div class="section1-content">
                <div class="search">
                    <span class="title">精确查找</span>
                    <div>
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                          <el-option label="餐厅名" value="1"></el-option>
                          <el-option label="订单号" value="2"></el-option>
                          <el-option label="用户电话" value="3"></el-option>
                        </el-select>
                        <el-input
                          placeholder="请输入内容"
                          v-model="input3"
                          class="input-with-select"
                        >
                        </el-input>
                        <span class="iconfont icon-sousuo icon-search"></span>
                    </div>
                </div>
                <div class="fileType">
                    <span class="title">文件类型</span>
                    <el-tabs type="border-card">
                        <el-tab-pane label="全部">全部</el-tab-pane>
                        <el-tab-pane label="图文">图文</el-tab-pane>
                        <el-tab-pane label="视频">视频</el-tab-pane>
                        <el-tab-pane label="音频">音频</el-tab-pane>
                    </el-tabs>
                </div>
                <div class="special">
                    <span class="title">专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题</span>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="前端" name="first">前端</el-tab-pane>
                        <el-tab-pane label="后端" name="second">后端</el-tab-pane>
                        <el-tab-pane label="学习心得" name="third">学习心得</el-tab-pane>
                        <el-tab-pane label="职业路线" name="fourth">职业路线</el-tab-pane>
                    </el-tabs>
                </div>
                <div class="button">
                    <el-button type="primary">查询</el-button>
                    <el-button type="info">重置</el-button>
                </div>
            </div>
        </section>
        <section class="section2">
            <div class="section2-add">
                <AddRepository class="AddRepository" />
            </div>
            <el-tabs type="border-card">
                <el-tab-pane :label="item.label" v-for="(item,index) in tableData" :key='index'>
                    <el-table :data="item.dataList" border style="width: 100%">
                        <el-table-column fixed prop="date" label="海报" width="150">
                            <img src="@/assets/imgs/repository/hai01.jpeg" alt="" class="poster" />
                        </el-table-column>
                        <el-table-column
                          :prop="item2.prop"
                          :label="item2.label"
                          :sortable="item2.sortable"
                          :width="item2.width"
                          v-for='(item2,index) in item.titleList' :key="index"
                        >
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200" v-if='item.label == "资源列表"'>
                            <!-- <EditRepository /> -->
                            <editData btnName='编辑'/>
                            <a-button type="danger" @click="showModal"> 下架 </a-button>
                            <a-modal
                              title="下架提示"
                              :visible="visible"
                              :confirm-loading="confirmLoading"
                              @ok="handleOk"
                              @cancel="handleCancel"
                            >
                              <p>{{ ModalText }}</p>
                            </a-modal>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100" v-else-if="item.label == '待审核'">
                            <!-- <Check componentName="审核" /> -->
                            <editData btnName='审核'/>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200" v-else>
                            <template slot-scope="scope">
                                <el-button
                                  @click="handledDeleteClick(scope.row)"
                                  type="danger"
                                  size="small"
                                  >删除</el-button
                                >
                                <a-modal
                                  title="消息通知"
                                  :visible="visible"
                                  :confirm-loading="confirmLoading"
                                  @ok="handleOk"
                                  @cancel="handleCancel"
                                >
                                    <p>{{ deleteModalText }}</p>
                                </a-modal>
                                <Check componentName="重新审核" />
                            </template>
                      </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </section>
    </div>
</template>
<script>
import "@/assets/css/repository/font_8kqdhl47x5t/iconfont.css";
import AddRepository from "./components/AddRepository";
// import EditRepository from "./EditRepository";
import editData from './components/rightModel'
// import Check from "./Check";
import tableData from './utils/tableData'
export default {
    components: {
        AddRepository,
        editData
    },
    data() {
        return {
            tableData, //section2资源列表数据

            deleteModalText: "确认删除这条资源记录吗",
            ModalText: "确认将该资源下架吗",
            visible: false,
            confirmLoading: false,

            input1: "",
            input2: "",
            input3: "",
            select: "",
            activeName: "first",
        };
    },
    methods: {
      //删除提示
        handledDeleteClick() {
            this.visible = true;
        },
        //下架提示
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.ModalText = "The modal will be closed after two seconds";
            this.confirmLoading = true;
            setTimeout(() => {
              this.visible = false;
              this.confirmLoading = false;
            }, 2000);
        },
        handleCancel(e) {
            console.log("Clicked cancel button");
            this.visible = false;
        },
    },
};
</script>

<style lang='scss' scoped>
$color: #ffffff;
$border-radius: 15px;
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .section1 {
    width: 95%;
    height: 265px;
    margin-top: 20px;
    .crumbs {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 30px;
      .iocn-size {
        margin-right: 10px;
        color: #3c99fe;
        font-size: 25px;
      }
    }
    .section1-content {
      width: 100%;
      height: 230px;
      background-color: $color;
      border-radius: $border-radius;
      overflow: hidden;
      .search {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        /deep/ .input-with-select .el-input__inner {
          border-radius: 0px 30px 30px 0px;
        }
        /deep/ .el-input--suffix .el-input__inner {
          border-radius: 30px 0px 0px 30px;
        }
        .title {
          margin-right: 20px;
        }
        .el-select {
          width: 100px;
        }
        .input-with-select {
          position: relative;
          left: -5px;
          width: 300px;
        }
        .icon-search {
          position: relative;
          left: -50px;
          border-radius: 50%;
          padding: 5px;
          background-color: #DDE6FC;
        }
      }
      .fileType {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        .title {
          margin-right: 20px;
        }
        .el-tabs {
          width: 400px;
          border-radius: 10px !important;
          .el-tabs--border-card {
            border: 0px solid transparent;
          }
          /deep/.el-tabs--border-card > .el-tabs__header {
            background-color: #f0f2f7;
            border-bottom: 0px;
          }
          /deep/ .el-tabs__content {
            display: none;
          }
        }
      }
      .special {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        .title {
          margin-right: 20px;
        }
        .el-tabs {
          width: 400px;
          /deep/ .el-tabs__content {
            display: none;
          }
        }
      }
      .button {
        margin-top: 10px;
        margin-left: 20px;
        .el-button {
          width: 100px;
          border-radius: 10px;
        }
        .el-button--info {
          background-color: #f0f2f7;
          border-color: #f0f2f7;
          color: blue;
        }
        .el-button--info:hover {
          background-color: #ebecec;
          border-color: #ebecec;
        }
      }
    }
  }
  .section2 {
    position: relative;
    width: 95%;
    height: 350px;
    margin-top: 20px;
    background-color: $color;
    border-radius: $border-radius;
    overflow: hidden;
    /deep/ .cell {
      display: flex;
      justify-content: space-evenly;
    }
    .AddRepository {
      position: absolute;
      top: 5px;
      right: 20px;
      //   color: blue;
      z-index: 999;
    }
    /deep/ .el-tabs__content {
      height: 300px;
    }
    .poster {
      width: 100px;
      height: 50px;
    }
  }
}
</style>